<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        height: 333px;
        width: 500px;
      }
      #outer {
        height: 333px;
        width: 520px;
        margin: 50px auto;
        background-color: yellowgreen;
        padding: 10px 0;
        position: relative;
        overflow: hidden;
      }
      #imgList {
        list-style: none;
        position: absolute;
      }
      #imgList img {
        float: left;
        margin: 0 10px;
      }
      #navDiv {
        position: absolute;
        bottom: 15px;
        left: 197px;
      }
      #navDiv a:hover {
        background-color: black;
      }
      #navDiv a {
        float: left;
        width: 15px;
        height: 15px;
        background-color: red;
        margin: 5px;
        opacity: 0.5;
      }
    </style>

    <script src="./tools.js"></script>

    <script>
      window.onload = function () {
        var imgList = document.getElementById("imgList");
        var imgArr = document.getElementsByTagName("img");
        imgList.style.width = 520 * imgArr.length + "px";
        var imgDiv = document.getElementById("navDiv");
        var outer = document.getElementById("outer");

        navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
        var index = 0;
        var allA = document.getElementsByTagName("a");
        allA[index].style.backgroundColor = "black";
        /**
         * 点击超链接切换到指定图片
         *  点击第一个超链接，显示第一个超链接
         */

        for (let i = 0; i < allA.length; i++) {
          allA[i].num = i;
          allA[i].onclick = function () {
            clearInterval(timer);
            index = this.num;

            setA();
            move(imgList, "left", -520 * index, 20, function () {
              autoChange();
            });
          };
        }
        autoChange();
        //设置选中的a
        function setA() {
          // 判断当前索引是否是最后一张图片
          if (index >= imgArr.length - 1) {
            index = 0;
            // 此时显示的最后一张图片
            // 通过css将最后一张切换到第一张
            imgList.style.left = 0;
          }
          for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor = "";
          }
          allA[index].style.backgroundColor = "black";
        }
        var timer;
        // 自动切换图片
        function autoChange() {
          timer = setInterval(function () {
            index++;
            index %= imgArr.length;
            move(imgList, "left", -520 * index, 20, function () {
              setA();
            });
          }, 3000);
        }
      };
    </script>
  </head>
  <body>
    <div id="outer">
      <ul id="imgList">
        <li>
          <img src="../img/1.png" alt="" />
        </li>
        <li>
          <img src="../img/2.png" alt="" />
        </li>
        <li>
          <img src="../img/3.png" alt="" />
        </li>
        <li>
          <img src="../img/4.png" alt="" />
        </li>
        <li>
          <img src="../img/5.png" alt="" />
        </li>
        <li>
          <img src="../img/1.png" alt="" />
        </li>
      </ul>
      <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
    </div>
  </body>
</html>
